<template>
  <el-form :inline="true">
    <el-row >
      <!--      <el-col :span="4">-->
      <!--        <el-form-item>-->
      <!--          <el-select v-model="workstate" placeholder="状态" @change="changeWorkState" clearable="true">-->
      <!--            <el-option label="出售中" value="出售中" />-->
      <!--            <el-option label="停售" value="停售" />-->
      <!--          </el-select>-->
      <!--        </el-form-item>-->
      <!--      </el-col>-->
      <el-col :span="5">
        <el-form-item>
          <el-select v-model="worktype" placeholder="商品种类" @change="changeWorktype" clearable="true">
            <el-option label="出售使用权" value="使用权" />
            <el-option label="出售所有权" value="所有权" />
            <el-option label="停售" value="停售" />
          </el-select>
        </el-form-item>
      </el-col>

      <el-col :span="6">
        <el-form-item>
          <el-input v-model="workname" placeholder="搜索作品名称"  clearable="true" @clear="getdata"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="2" :offset="6">
        <el-form-item>
          <el-button color="#626aef"
                     :dark="isDark"
                     plain
                     :icon="Search"
                     @click="search" >搜索</el-button>
        </el-form-item>
      </el-col>
      <el-col :span="2">
        <el-form-item>
          <el-button @click="getdata"
                     color="#626aef"
                     :dark="isDark"
                     plain>刷新</el-button>
        </el-form-item>
      </el-col>
      <el-col :span="3">
        <el-form-item>
          <el-button @click="addSale"
                     color="#626aef"
                     :dark="isDark"
                     plain>添加出售</el-button>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>

  <el-table  :data="TableData"  style="width: 1170px"
             :header-cell-style="{background:'#703CF6',color:'#fdfdfd',textAlign: 'center'}"

             :cell-style="{ textAlign: 'center' }">
    <el-table-column prop="title" label="售单标题" width="140" />
    <el-table-column prop="description" label="售单描述" width="200" />
    <el-table-column prop="tag" label="标签"  width="210">
      <template  v-slot="scope">
        <el-tag  type="warning" v-if="scope.row.tag1">{{scope.row.tag1}}</el-tag>
        <el-tag  type="success" v-if="scope.row.tag2">{{scope.row.tag2}}</el-tag>
        <el-tag  type="danger" v-if="scope.row.tag3">{{scope.row.tag3}}</el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="status" label="出售种类" width="180">
      <template  v-slot="scope">
        <el-tag  type="primary" v-if="scope.row.status=='使用权'">{{scope.row.status}}</el-tag>
        <el-tag  type="success" v-if="scope.row.status=='所有权'">{{scope.row.status}}</el-tag>
        <el-tag  type="warning" v-if="scope.row.status=='所有权已转让'">{{scope.row.status}}</el-tag>
        <el-tag  type="danger" v-if="scope.row.status=='停售'">{{scope.row.status}}</el-tag>
      </template>
    </el-table-column>


    <!--    <el-table-column prop="ownerName" label="拥有者" width="120"/>-->
    <!--    <el-table-column prop="ownerName" label="所有者" width="120"/>-->
    <el-table-column prop="price" label="价格" width="180"/>
    <el-table-column prop="operation" label="操作" width="260">
      <template  v-slot="scope">
        <el-popconfirm
            confirm-button-text="是"
            cancel-button-text="否"
            :icon="InfoFilled"
            icon-color="#626AEF"
            title="是否确定撤销?"
            @confirm="revocation(scope.row.id)"
        >
          <template #reference>
            <el-link  type="info" >撤销</el-link>
          </template>
        </el-popconfirm>

        <span class="seat"></span>

        <el-popconfirm
            confirm-button-text="是"
            cancel-button-text="否"
            :icon="InfoFilled"
            icon-color="#626AEF"
            title="是否确定停售?"
            @confirm="stopSale(scope.row.id)"
        >
          <template #reference>
            <el-link  type="danger"  v-if="scope.row.status!='停售'" >停售</el-link>
          </template>
        </el-popconfirm>

        <el-popconfirm
            confirm-button-text="是"
            cancel-button-text="否"
            :icon="InfoFilled"
            icon-color="#626AEF"
            title="是否确定出售?"
            @confirm="sell(scope.row.id)"
        >
          <template #reference>
            <el-link  color="#626aef"
                      :dark="isDark"
                      plain
                      v-if="scope.row.status=='停售'" >出售</el-link>
          </template>
        </el-popconfirm>

        <!--    <el-link  type="danger" @click="stopSale(scope.row.id)" v-if="scope.row.status!='停售'" >停售</el-link>-->
        <!--    <el-link  type="primary" @click="sell(scope.row.id)" v-if="scope.row.status=='停售'" >出售</el-link>-->

        <span class="seat"></span>
        <el-link  color="#626aef"
                  :dark="isDark"
                  plain
                  @click="openedit(scope.row.id)">编辑</el-link>
      </template>
    </el-table-column>

  </el-table>


  <!--  添加售单界面-->

  <el-dialog
      v-model="addOnsleView"
      title="添加出售"
      width="65%"
      ref="ruleForm"
      class="digTop"
  >

    <el-form
        ref="rulesForm"
        :model="rulesForm"
        :rules="formRules"
        label-width="120px"
    >
      <el-form-item
          label="请选择NFT"
          prop="selectNft"
      >
        <el-select
            v-model="rulesForm.selectNft"
            class="m-2"
            placeholder="请选择将要出售的NFT"
            value-key='id'
        >
          <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.name"
              :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item
          label="标题"
          prop="worktitle"
          v-model="rulesForm.worktitle"
      >
        <el-input v-model="rulesForm.worktitle" placeholder="请输入标题"></el-input>
      </el-form-item>
      <el-form-item
          label="商品描述"
          prop="workdesc"
      >
        <el-input v-model="rulesForm.workdesc"  type="textarea" placeholder="请输入不超过300字的商品描述"  />
      </el-form-item>
      <el-form-item
          label="出售类别"
          prop="saletype"
      >
        <el-radio-group v-model="rulesForm.saletype">
          <el-radio label="1" >出售使用权</el-radio>
          <el-radio label="2"  >出售所有权</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
          label="价格（HNUB）"
          prop="price"
      >
        <el-input v-model="rulesForm.price" placeholder="请输入价格"></el-input>
        <el-icon><Warning /></el-icon>
        <span style="color: darkgrey" >最低0.01最高1000000</span>
      </el-form-item>

      <el-form-item>
        <el-button color="#626aef"
                   :dark="isDark"
                   plain
                   @click="makeSure" >确认</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

  <!--编辑售单-->
  <el-dialog
      v-model="editSaleVisible"
      title="编辑售单" width="60%"
      align-center
      class="dialog"
  >

    <el-form
        :model="editForm"
        ref="editForm"
        :rules="editRule"
    >
      <el-form-item label="标题"  prop="title">
        <el-input v-model="editForm.title"/>
      </el-form-item>
      <el-form-item label="描述" prop="workdesc">
        <el-input v-model="editForm.workdesc"  type="textarea"   />
      </el-form-item>

      <el-form-item label="价格" prop="price">
        <el-input v-model="editForm.price" />
      </el-form-item>
    </el-form>



    <template #footer>
      <span>
        <el-button class="cancel-but" @click="editSaleVisible=false">取消</el-button>
          <el-button color="#626aef"
                     :dark="isDark"
                     plain
                     @click="editSure" >确认</el-button>
      </span>
    </template>
  </el-dialog>

</template>

<script>
// eslint-disable-next-line no-unused-vars
import {ElMessage, ElMessageBox} from 'element-plus'
import axios from 'axios'
// eslint-disable-next-line no-unused-vars
import router from "@/router";
// import {Edit } from '@element-plus/icons-vue'

export default {
  name: "my-onsale",
  inject:['reload'],
  computed:{
    userId(){
      return JSON.parse(sessionStorage.getItem('userObj')).id;
    }
  },
  created(){
    console.log('成功加载数据')
    // 获取售单数据
    this.getdata()
    // 获取本用户nft数据
    this.getnftdata()
  },


  data(){
    return {
      saleId:'',
      editSaleVisible:false,
      editForm:[
        {
          title:'',
          price:'',
          workdesc:'',
        }
      ],
      editRule:{
        title: [
          {required: true,trigger:'blur' ,message:'请输入标题'}
        ],

        workdesc:[
          {required: true,trigger:'blur' ,message:'请输入描述'}
        ],
        price:[
          {required: true,trigger:'blur' ,message:'请输入价格'}
        ]
      },

      addOnsleView:false,
      workstate:'',
      workname:'',
      worktype:'',

      TableData:[],

      //可供出售的nft
      options:[ ],

      // 添加出售
      rulesForm:{
        worktitle:'',
        workdesc:'',
        salestate:'',
        saletype:'',
        price:'',
        selectNft:'',
      },
      //售单校验
      formRules:{
        selectNft: [
          {required: true,trigger:'blur' ,message:'请选择nft'}
        ],

        worktitle:[
          {required: true,trigger:'blur' ,message:'请输入标题'}
        ],
        workdesc:[
          {maxlength:300,minlength:5,required: true,trigger:'blur',message:'请按要求输入描述'}
        ],
        price:[
          {required: true,trigger:'blur' ,validator: isNum}
        ],
        saletype:[
          {required: true,trigger:'blur' ,message:'请按要求选择出售类别'}
        ]
      },
    }
  },
  methods: {
    //售单状态选择
    changeWorkState(){
      console.log(this.workstate)
      this.getdata()

    },
    // 售单种类选择
    changeWorktype(){
      console.log(this.worktype)
      this.getdata()
    },
    //搜索
    search(){
      console.log(this.workname)
      this.getdata()
    },
    //撤销
    revocation(temp){
      var _t=this
      let form=new FormData();
      form.append("id",temp)
      axios.post('http://120.48.51.66:8081/sale/deleteSale',form).then( (response)=>{
        if(response.data.code==200){
          ElMessage({
            message:"撤销成功",
            type:'success'
          });
          console.log('撤销成功')
          _t.getdata()
        }else{
          this.$message({
            message: "撤销失败",
            type: "error"
          });
        }
      });
    },
    //停售
    stopSale(temp){
      // ElMessageBox.confirm('是否确认停售')
      console.log(temp)
      var _t=this
      let form=new FormData();
      form.append("id",temp)
      form.append('status',0)

      axios.post('http://120.48.51.66:8081/sale/changeStatus',form).then( (response)=>{
        if(response.data.code==200){
          ElMessage({
            message:"停售成功",
            type:'success'
          });
          _t.getdata()
        }else{
          this.$message({
            message: "添加售单失败",
            type: "error"
          });
        }
      });
    },
// 出售
    sell(temp){
      // ElMessageBox.confirm('是否确认出售')
      console.log('出售')
      console.log(temp)
      var _t=this
      let form=new FormData();
      form.append("id",temp)
      form.append('status',1)

      axios.post('http://120.48.51.66:8081/sale/changeStatus',form).then( (response)=>{
        if(response.data.code==200){
          ElMessage({
            message:"恢复出售成功",
            type:'success'
          });
          console.log('恢复出售成功')
          console.log(form)
          _t.getdata()
        }else{
          this.$message({
            message: "恢复出售失败",
            type: "error"
          });
        }
      });
    },
    //编辑
    openedit(temp){
      console.log('编辑')
      this.saleId=temp
      this.editSaleVisible=true
    },
    edit(){
      var _t=this
      let form=new FormData()
      form.append("id",this.saleId)
      form.append("title", this.editForm.title)
      form.append("description",this.editForm.workdesc)
      form.append("price",this.editForm.price)
      axios.post('http://120.48.51.66:8081/sale/editSale',form).then( (response)=>{
        if(response.data.code==200){
          ElMessage({
            message:"编辑成功",
            type:'success'
          });
          console.log('编辑成功')
          console.log(form)
          this.reload()
          _t.getdata()
        }else{
          this.$message({
            message: "编辑失败",
            type: "error"
          });
        }
      });

    },
    editSure(){
      this.$refs.editForm.validate(valid=>{
            if(valid)
            {
              console.log('兜底成功')
              this.edit()
              console.log('确认添加')
              this.editSaleVisible=false;
            }else{
              console.log('兜底失败')
            }
          }
      )
    },

    makeSure(){

      this.$refs.rulesForm.validate(valid=>{
            if(valid)
            {
              console.log('兜底成功')
              this.senddata()
              console.log('确认添加')
              this.addOnsleView=false
            }else{
              console.log('兜底失败')
            }
          }
      )

    },
    addSale(){
      if(JSON.parse(sessionStorage.getItem('userObj')).isCertified==1){
        this.getnftdata()
        this.addOnsleView=true

      }else{
        this.$message({
          message: "请先实名认证",
          type: "error"
        });
      }
    },

//获取售单数据
    getdata(){
      axios.get('http://120.48.51.66:8081/sale/getSaleListById'
          ,{
            params:{
              userId:this.userId,
              stringPara:this.workname,
              status:this.worktype,

            }
          }).then((response)=>{
        if(response.data.code==200){
          console.log('售单数据')
          console.log(response.data)
          console.log(this.rulesForm.selectNft)
          this.TableData=response.data.data.saleList
          // this.reload()
        }else{
          console.log('111')
          ElMessage({
            message: "获取在售列表失败",
            type: "error"
          });
        }
      })
    },

    // 获取本用户nft数据
    getnftdata(){
      console.log('添加售单可选择nft')
      axios.get('http://120.48.51.66:8081/sale/getNftList'
          ,{
            params:{
              userId:this.userId,

            }
          }).then((response)=>{
        if(response.data.code==200){

          console.log(response.data)
          this.options=response.data.data.nftList
          console.log('获得本用户nft')
          console.log(this.options)
          // this.reload()
        }else{
          if(response.data.code==11100){
            console.log(11)
          }else{
            this.$message({
              message: "获取在售列表失败",
              type: "error"
            });          }

        }
      })
    },

    //表单清空
    formClear(){
      this.rulesForm.selectNft=''
      this.rulesForm.saletype=''
      this.rulesForm.price=''
      this.rulesForm.worktitle=''
      this.rulesForm.workdesc=''
    },

    // 发送数据
    senddata(){
      var _t = this
      let form=new FormData();
      form.append("workId",this.rulesForm.selectNft)
      form.append('status',this.rulesForm.saletype)
      form.append('price',this.rulesForm.price)
      form.append('title',this.rulesForm.worktitle)
      form.append('description',this.rulesForm.workdesc)
      form.append('userId',this.userId)
      console.log(form)
      axios.post('http://120.48.51.66:8081/sale/addSale',form).then( (response)=>{
        if(response.data.code==200){
          ElMessage({
            message:"添加售单成功",
            type:'success'
          });
          console.log('添加售单成功')
          _t.formClear()
          _t.getdata()
        }else{
          this.$message({
            message: "添加售单失败",
            type: "error"
          });
          _t.formClear()
        }
      });
    }



  }
}
//售单判断价格
export function isNum(rule, value, callback) {
  if (value == '' || value == undefined || value == null) {
    callback(new Error('请输入价格'));
  } else if (!Number(value)) {
    callback(new Error('请输入[0.01,1000000]之间的数字'));
  } else if (value < 0.01|| value > 1000000) {
    callback(new Error('请输入[0.01,1000000]之间的数字'));
  } else {
    callback();
  }
}
</script>

<style >
.digTop {
  border-radius: 12px 12px 12px 12px;
}
.box-card {
  width: 480px;
  height: 300px;
}
.seat{
  padding: 5px;
}
</style>




